<!-- 死页面-设置水印 -->
<template>
  <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
    <el-table-column prop="a" label="水印内容" width="" />
    <el-table-column prop="b" label="水印大小" width="" />
    <el-table-column prop="c" label="水印颜色" width="" />
    <el-table-column prop="d" label="水印透明度" width="" />
    <el-table-column prop="e" label="水印位置" width="" />
    <el-table-column prop="" label="操作" width="600" fixed="right">
      <template #default="scope">
        <el-button type="text" @click="visible=true">编辑</el-button>
        <el-button type="text">删除</el-button>
        <el-button type="text" @click="preview(scope.row)">预览</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
  <el-dialog v-model="visible" title="水印修改" @close="visible=false" width="30%">
    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
      <el-form-item label="水印内容" prop="a">
        <el-input v-model="dataForm.a" style="width: 240px;"></el-input>
      </el-form-item>
      <el-form-item label="水印大小" prop="b">
        <el-input v-model="dataForm.b" style="width: 240px;"></el-input>
      </el-form-item>
      <el-form-item label="水印颜色" prop="c">
        <el-color-picker v-model="dataForm.c" />
      </el-form-item>
      <el-form-item label="水印透明度" prop="d">
        <el-input v-model="dataForm.d" style="width: 240px;"></el-input>
      </el-form-item>
      <el-form-item label="水印位置" prop="e">
        <el-select v-model="dataForm.e" style="width: 240px">
          <el-option label="中心" value="中心"/>
          <el-option label="左上" value="左上"/>
          <el-option label="右上" value="右上"/>
          <el-option label="左下" value="左下"/>
          <el-option label="右下" value="右下"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </template>
  </el-dialog>
</template>
        
  <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { useRouter } from 'vue-router'

const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const data = reactive({
	tableData: [{ a: '预览水印', b: '300', c: '#000000', d: '0.3', e: '中心' }]
})

onMounted(() => {
	getList()
})

const getList = () => {}

const visible = ref(false)
const dataForm = ref({
	a: '预览水印',
	b: '300',
	c: '#000000',
	d: '0.3',
	e: '中心'
})
const dataRules = ref({})
const dataFormRef = ref(null)
const submit = () => {
    setTimeout(() => {
		visible.value = false
        data.tableData = [{ a: '众焰水印', b: '100', c: '#FF0000', d: '0.3', e: '左上' }]
		ElMessage.success('设置成功！')
	}, 300)
}
const router = useRouter()
const preview = () => {
	// 在新标签页中打开
	const routeData = router.resolve({
		path: `/preview`,
		query: {
			// parentId: row.id,
			// parentName: row.name,
			type: 'watermark'
		}
	})
	window.open(routeData.href, '_blank')
}
</script>
        
  <style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
        